<!--
- Author:  LiShibin.
- Date:    2017/7/14 0014.
- File:    spread.
-->
<template>
  <div>
    <div class="recode_text">长按下面二维码保存图片或发送给朋友<br/>邀请成功后，当您的朋友购买商品时您将获得积分</div>
    <div id="qrcode_view" style="padding-bottom: 2.55rem">
      <img id="qr-view" src='' style="width:100%; height:auto;"/>
    </div>
    <div class="code_bg" id="bgimg" style=" margin-left:20rem;">
      <div class="Web_Box2">

        <!--头像-->
        <div class="code_head clear">
          <div class="codeimg"><img ref="" :src="memberInfo.member_avatar"></div>
          <div class=" textcode"><p>{{memberInfo.member_name}}</p>
            <p>为您推荐金品种子商城</p></div>
        </div>
        <!--头像 end-->
        <!--二维码-->

        <div class="mycode"><img ref="qr-img" :src="memberInfo.qrcode_image">
          <p class="erm">长按二维码点击识别二维码</p></div>
        <!--二维码 end-->
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import * as request from '../../request'

  let html2canvas = require('html2canvas')
  //  let avatar = require('../../assets/images/avatar.png')

  export default {
    beforeRouteEnter(to, from, next) {
      request.getMemberInfo().then(data => {
        next(vm => {
          vm.memberInfo = data
        })
      }).catch(e => {
        next()
      })
    },
    data() {
      return {
        memberInfo: {}
      }
    },
    components: {},
    mounted() {
//      this.getMemberInfo()
      setTimeout(() => {
        // let bg = require('../../assets/images/erweim.png')
        // Promise.all([this.$utils.imgLoaded(this.memberInfo.member_avatar), this.$utils.imgLoaded(this.memberInfo.qrcode_image), this.$utils.imgLoaded(bg)]).then(() => {
        //   console.log('三张图都加载成功')
        //   this.initCanvas()
        // }).catch(e => {
        //   this.$toast('获取用户的二维码失败')
        //   console.log('有图片未加载完成', e)
        //   document.getElementById('bgimg').style.display = 'none'
        // })
      }, 500)
    },
    methods: {
      initCanvas() {
        html2canvas(document.getElementById('bgimg')).then(function (canvas) {
          var imgData = canvas.toDataURL()
          document.getElementById('qr-view').src = imgData
          document.getElementById('bgimg').style.display = 'none'
          // console.log('iii', imgData)
        })
        // html2canvas(document.getElementById('bgimg'), {
        //   onrendered: function (canvas) {
        //     var imgData = canvas.toDataURL()
        //     document.getElementById('qr-view').src = imgData
        //     console.log('iii', imgData)
        // document.getElementById('bgimg').style.display = 'none'
        //     // document.getElementById('qrcode_view').style.display = ''
        //   }
        // })
      }
    }
  }
</script>

<style>

</style>
